import React, { useEffect, Suspense } from 'react';
import { useReducer, store, updateTool } from '@/components';
import styles from './index.less';
const Code_01 = React.lazy(() =>
  import('@/components/Theme/code_01/code_01.jsx'),
);
const App = () => {
  const [state, setState] = useReducer({
    basicData: {}, //基本信息
    educationData: [], //教育背景
  });
  const update = () => {
    setState({
      basicData: store.getState('BASIC'),
      educationData: store.getState('EDUCATIONAL'),
    });
  };
  useEffect(() => updateTool.addUpdateFun('content', update), []);
  return (
    <main className={styles.background}>
      <section
        id="resumePreview_content"
        style={{ width: '592.28px', margin: '0 auto' }}
      >
        <div className={styles.resumeContent}>
          <Suspense fallback={<div>Loading...</div>}>
            <Code_01
              basicData={state.basicData}
              educationData={state.educationData}
            />
          </Suspense>
        </div>
      </section>
    </main>
  );
};
export default App;
